<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="...">
    <legend>添加商品详情信息</legend>
</fieldset>

<form class="layui-form" action="" id="form_goodsdetail">
    <div class="layui-form-item">
        <label class="layui-form-label">商品编号</label>
        <div class="layui-input-block">
            <input type="text" id="gno" lay-verify="title" autocomplete="off" placeholder="请输入商品编号" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="text" id="gname" lay-verify="title" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">商品型号</label>
        <div class="layui-input-block">
            <input type="text" name="version" lay-verify="title" autocomplete="off" placeholder="请输入商品型号" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">商品颜色</label>
        <div class="layui-input-block" style="margin-left: 30px;">
            <div class="layui-input-inline">
                <input type="text" id="color" name="color" lay-verify="title" autocomplete="off" placeholder="请选择颜色" class="layui-input">
            </div>
            <div id="color1" style="margin-left: 30px;"></div>
        </div>

    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">商品大小</label>
        <div class="layui-input-block">
            <input type="text" name="size" lay-verify="title" autocomplete="off" placeholder="请输入商品大小" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品详细价格</label>
        <div class="layui-input-inline">
            <input type="number" name="gdprice" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">元</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品数量</label>
        <div class="layui-input-inline">
            <input type="number" name="num" autocomplete="off" placeholder="请输入商品数量" class="layui-input">
        </div>
    </div>

    <div class="layui-from-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="add" lay-submit="" type="submit" lay-event="add" class="add">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/ajax.js"></script>
<script>
    layui.use(['form', 'table', 'jquery'], function () {
        var form = layui.form
            , table = layui.table
            , $ = layui.jquery;
        form.on('submit(add)', function(data){
            var obj = JSON.stringify(data.field);
            // 获取 gno 的值
            var gno = $("input[id='gno']").val();
            // 将 gno 添加到 data.field 对象中
            data.field.gno = gno;
            console.log(data);
            $.post("../../goodsdetail?op=add",data.field,function(rs){
                console.log(rs);
                if(rs == 1){
                    //重置表单
                    $("#form_goodsdetail")[0].reset();
                    layui.form.render();
                }else{
                    layer.msg(rs.msg);
                }
            },"json");
            return false;//阻止表单提交，采用ajax提交
        });

        layui.use('colorpicker', function() {
            var $ = layui.$
                , colorpicker = layui.colorpicker;
            //常规使用
            //初始色值
            colorpicker.render({
                elem: '#color1'
                , color: '#2ec770' //设置默认色
                , done: function (color) {
                    $('#color').val(color);
                    layer.tips('选择了：' + color, this.elem);
                }
            });
        });

    });


    $(function() {
        var urlParams = new URLSearchParams(window.location.search);
        var gno = urlParams.get('gno');
        var gname = decodeURIComponent(urlParams.get('gname'));
        if (gno !== null && gno !== "" && gname !== null && gname !== "") {
            $('#gno').val(gno);
            $('#gname').val(gname);
        }
    });



</script>



</body>
</html>